<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>醉品茶城购物车</title>
		<meta name="keywords" content="茶叶,醉品茶城">
		<link rel="stylesheet" href="../css/initCss.css">
		<link rel="stylesheet" href="../css/public.css">
		<link rel="stylesheet" href="../css/goodcar.css">
	</head>
	<body>
		<!-- 网页头部header -->
		<div id="header">
			<div class="headerCenter">
				<div class="headLeft">
					<ul class="headLeftUl">
						<li class="zp-index"><a href="../index.html">醉品茶城首页</a></li>
						<li class="zp-tel">
							<a href="">醉品茶城手机版</a>
							<div class="zp-pic">
								<img src="../static/img/phone_qr.jpg" alt="">
								"手机登录购买"
							</div>
							</li>
					</ul>
				</div>
				<div class="headright">
					<dl>
						<dt class="cart-num">
							<a href="#">购物车</a>
						</dt>
					</dl>
				</div>
				<div class="headLast">
					<ul class="head-sel">
						<div class="login">
							<li><a href="login.html">登录</a></li>
						    <li><a href="register.html">注册</a></li>
						</div>						
						<li class="welcome"><p>欢迎VIP<mark><em id="userName">XXX</em></mark>进入本网站<span id="logout">注销</span></p></li>
						<li><a id="myOrders" href="#">我的订单</a></li>
						<li><a href="#">帮助</a></li>
						<li><a href="#">关于醉品</a></li>
						<li class="icon-phone">
							<a href="#">4006-066-068</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- header-top -->
		<div id="headerTop">
			<div class="headtopcenter">
				<div class="logo">
					<a href="/"><img src="../static/img/zp_logo_u1.png" alt="醉品茶城"></a>
				</div>
				<div class="search-box">
					<form action="#" id="list">
						<input type="text" name="keyword" class="search-text">
					</form>
					<span class="search-btn" id="sub"></span>
					<div class="clearfix" id="keyword">
						<a href="goodlist.html" target="_blank" class="first_hot">白茶</a>
						<a href="goodlist.html" target="_blank">广东单枞</a>
						<a href="goodlist.html" target="_blank">龙井</a>
						<a href="goodlist.html" target="_blank">金骏眉</a>
						<a href="goodlist.html" target="_blank">普洱</a>
					</div>
				</div>
				<div class="three-list">
					<ul class="clearfix">
						<li><p>全场商品90天保价</p></li>
						<li><p>满59元免邮费</p></li>
						<li><p>2000城市货到付款</p></li>
					</ul>
				</div>
				<div class="code">
					<img class="qr-code-img" src="../static/img/phone_qr.jpg" alt="">
					<span class="code-text">手机登录购买</span>
				</div>
			</div>
		</div>
		<!-- header-sel -->
		<div id="header-sel">
			<div class="headSelCenter">
				<dl class="good-list">
					<dt class="list-title">全部商品分类</dt>
					<dd class="list-info">
						<dl class="clearfix">
							<dt class="big-title"><a href="#">白茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">白毫银针</a></li>
									<li> <a href="#">白牡丹</a></li>
									<li> <a href="#">寿眉</a></li>
									<li> <a href="#">其他白茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/36.png" alt=""></a>
										<a href="goodlist.html">白毫银针</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="goodlist.html">白牡丹</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="goodlist.html">寿眉</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="goodlist.html">其他白茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">黑茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">普洱茶</a></li>
									<li> <a href="#">安化黑茶</a></li>
									<li> <a href="#">柑普茶</a></li>
									<li> <a href="#">六堡茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/普洱生茶.jpg" alt=""></a>
										<a href="goodlist.html">普洱茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/安化黑茶.jpg" alt=""></a>
										<a href="goodlist.html">安化黑茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/柑普茶.jpg" alt=""></a>
										<a href="goodlist.html">柑普茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/六堡茶.jpg" alt=""></a>
										<a href="goodlist.html">六堡茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">红茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="goodlist.html">金骏眉</a></li>
									<li> <a href="goodlist.html">正山小种</a></li>
									<li> <a href="goodlist.html">云南滇红</a></li>
									<li> <a href="goodlist.html">祁山红茶</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/金骏眉.jpg" alt=""></a>
										<a href="goodlist.html">金骏眉</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/正山小种.jpg" alt=""></a>
										<a href="goodlist.html">正山小种</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/金骏眉.jpg" alt=""></a>
										<a href="goodlist.html">云南滇红</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/祁门红茶.jpg" alt=""></a>
										<a href="goodlist.html">祁山红茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/九曲红梅.jpg" alt=""></a>
										<a href="goodlist.html">其他红茶</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">绿茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">龙井</a></li>
									<li> <a href="#">安吉白茶</a></li>
									<li> <a href="#">四川绿茶</a></li>
									<li> <a href="#">碧螺春</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/36.png" alt=""></a>
										<a href="goodlist.html">龙井</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="goodlist.html">安吉白茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="goodlist.html">四川绿茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="goodlist.html">碧螺春</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">乌龙茶</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">武夷岩茶</a></li>
									<li> <a href="#">安溪铁观音</a></li>
									<li> <a href="#">广东单从</a></li>
									<li> <a href="#">漳平水仙</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/36.png" alt=""></a>
										<a href="goodlist.html">武夷岩茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/白茶.jpg" alt=""></a>
										<a href="goodlist.html">安溪铁观音</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/寿眉.jpg" alt=""></a>
										<a href="goodlist.html">广东单从</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/其他白茶.jpg" alt=""></a>
										<a href="goodlist.html">漳平水仙</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">创新品</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">多品类茶</a></li>
									<li> <a href="#">茶器组合</a></li>
									<li> <a href="#">茶酒组合</a></li>
									<li> <a href="#">其他创新品</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/多品类茶.jpg" alt=""></a>
										<a href="goodlist.html">多品类茶</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/茶器组合.jpg" alt=""></a>
										<a href="goodlist.html">茶器组合</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/茶酒组合.jpg" alt=""></a>
										<a href="goodlist.html">茶酒组合</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/其他创新品.jpg" alt=""></a>
										<a href="goodlist.html">其他创新品</a>
									</li>
								</ul>
							</div>
						</dl>
						<dl class="clearfix">
							<dt class="big-title"><a href="#">茶器</a></dt>
							<dd class="float-left">
								<ul class="clearfix">
									<li> <a href="#">陶瓷茶具</a></li>
									<li> <a href="#">玻璃茶具</a></li>
									<li> <a href="#">紫砂茶具</a></li>
									<li> <a href="#">茶盘</a></li>
								</ul>
							</dd>
							<div class="colunm-common column-line">
								<ul>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/陶瓷茶具.jpg" alt=""></a>
										<a href="goodlist.html">陶瓷茶具</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/玻璃茶具.jpg" alt=""></a>
										<a href="goodlist.html">玻璃茶具</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/紫砂茶具.jpg" alt=""></a>
										<a href="goodlist.html">紫砂茶具</a>
									</li>
									<li class="clearfix">
										<a href="goodlist.html"><img src="../static/img/茶盘.jpg" alt=""></a>
										<a href="goodlist.html">茶盘</a>
									</li>
								</ul>
							</div>
						</dl>
					</dd>
				</dl>
				<ul class="row-nav">
					<li class="row-nav-list"><a href="goodlist.html" target="_blank">品牌集成馆</a></li>
					<li class="row-nav-list"><a href="goodlist.html" target="_blank">大师名匠馆</a></li>
					<li class="row-nav-list"><a href="goodlist.html" target="_blank">积分商城</a></li>
					<li class="row-nav-list"><a href="goodlist.html" target="_blank">茶礼定制</a></li>
				</ul>
			</div>
		</div>
		<!-- content -->
		<div id="car-box">
			<div class="zuipin-wrapper">
				<div class="good-car">
					<table border="1" class="car-table">
								<thead>
									<tr>
										<th>序号</th>
										<th>图片</th>
										<th>名字</th>
										<th>单价</th>
										<th>数量</th>
										<th>总价</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody class="tbody">
									<!-- <tr>
										<td><img src="" alt=""></td>
										<td></td>
										<td></td>
										<td><input type="number" min="1" value="2"></td>
										<td></td>
										<td>删除</td>
									</tr> -->
								</tbody>
								<tfoot>
									<tr>
									  <td rowspan="2">商品总数量:<span class="sum">0</span></td>
									  <td rowspan="5">商品总价:<span class="totalprice">0</span>元</td>
									</tr>
								</tfoot>
							</table>
				</div>
			</div>
		</div>
		<!-- footer -->
		<div id="zuipin-footer">
			<div class="zuipin-wrapper">
				<div class="footer-service">
					<ul>
						<li class="clearfix"><span>原产地直销</span></li>
						<li class="clearfix"><span>1000家合作社联盟</span></li>
						<li class="clearfix"><span>10万亩茶园直供</span></li>
						<li class="clearfix"><span>90天产品保价</span></li>
						<li class="clearfix"><span>30天商品退换货</span></li>
						<li class="clearfix"><span>满59元免运费</span></li>
					</ul>
				</div>
				<div class="footer-links">
					<dl class="col-links">
						<dt>购物指南</dt>
						<dd><a href="#" target="_blank">购物保障</a></dd>
						<dd><a href="#" target="_blank">积分政策</a></dd>
						<dd><a href="#" target="_blank">企业用户</a></dd>
					</dl>
					<dl class="col-links">
						<dt>配送方式</dt>
						<dd><a href="#" target="_blank">快递资费</a></dd>
						<dd><a href="#" target="_blank">配送时间</a></dd>
						<dd><a href="#" target="_blank">配送范围</a></dd>
						<dd><a href="#" target="_blank">验货签收</a></dd>
					</dl>
					<dl class="col-links">
						<dt>支付方式</dt>
						<dd><a href="#" target="_blank">货到付款</a></dd>
						<dd><a href="#" target="_blank">在线支付</a></dd>
						<dd><a href="#" target="_blank">网银在线</a></dd>
						<dd><a href="#" target="_blank">银行转账</a></dd>
					</dl>
					<dl class="col-links">
						<dt>售后服务</dt>
						<dd><a href="#" target="_blank">退换货原则</a></dd>
						<dd><a href="#" target="_blank">退换货要求</a></dd>
						<dd><a href="#" target="_blank">运费规则</a></dd>
						<dd><a href="#" target="_blank">退换货原则</a></dd>
					</dl>
					<dl class="col-links">
						<dt>关于醉品</dt>
						<dd><a href="#" target="_blank">关于我们</a></dd>
						<dd><a href="#" target="_blank">醉品动态</a></dd>
						<dd><a href="#" target="_blank">媒体声音</a></dd>
						<dd><a href="#" target="_blank">品牌集成</a></dd>
					</dl>
					<div class="col-contact">
						<p class="phone">4006-066-068</p>
						<p><span class="time-normal">周一至周五 8:40-18:00</span></p>
						<a class="btn-line-primary" href="#"><i></i>在线客服</a>
					</div>
					<div class="col-wap">
						<img src="../static/img/phone_qr.jpg" alt="">
						<p>醉品茶城手机版</p>
					</div>
				</div>
			</div>
		</div>
		<div id="footer-info-box">
			<div class="zuipin-wrapper">
				<div class="footer-info">
					<img src="../static/img/zui.png" alt="">
					<div class="col-aus">
						<ul class="list-about">
							<li><a href="#">关于我们</a>|</li>
							<li><a href="#">版权声明</a>|</li>
							<li><a href="#">联系我们</a></li>
						</ul><br>
						<div class="copyright"><p>&copy; 2010 - 2020 醉品茶城 厦门醉品春秋网络科技有限公司</p></div>
						<div>
							<span>zuipin.cn All Rights Reserved</span>
							<a href="#">闽ICP备10200063号-1</a>
						</div>		
					</div>
					<div class="footer-picmsg"><img src="../static/img/pincha.png" alt=""></div>
				</div>
			</div>
		</div>
		
	</body>
</html>
<script>	
    // 登录注册
    class Index{
    	constructor(){
    		this.login=document.querySelector(".login");
    		this.welcome=document.querySelector(".welcome");
    		this.logout=document.getElementById("logout");
    		this.uName=document.getElementById("userName");
    		this.goodcarBtn=document.querySelector(".cart-num");
    		// 对于需要验证是否登录的页面来说，应该立即获取是否登录的信息
    		this.init();
    		this.addEvent();
    	}
    	init(){
    		 // 获取之后，简单处理数据
    		this.m=sessionStorage.getItem("userMsg");
    		this.m=this.m ? JSON.parse(this.m) : {};
    		// 如果有登录信息
    		if(this.m.user){
    			// 显示登录的用户名
    			this.uName.innerHTML=this.m.user;
    			// 隐藏登录注册操作
    			this.login.style.display="none";
    			// 显示欢迎信息
    			this.welcome.style.display="block";
    			// 显示购物车按钮
    			this.goodcarBtn.style.display="block";
    		}
    	}
    	addEvent(){
    		 // 注销功能，就是抹掉登录成功之后的信息
    		this.logout.onclick=function(){
    			sessionStorage.removeItem("userMsg");
    			location.reload();
    		}
    	}
    }
    new Index;
	
	// 购物车获取localstorge数据渲染页面
	class Car{
			constructor() {
			    this.tCar=document.querySelector(".good-car");
				this.table=document.querySelector(".car-table");
				this.tbody=document.querySelector(".tbody");
				this.sum=document.querySelector(".sum");
				this.totalprice=document.querySelector(".totalprice");
			}
			getData(){
				 // 1.立即获取数据
				if(localStorage.getItem("goodsMsg")){
					this.gm=JSON.parse(localStorage.getItem("goodsMsg"));
				}else{
				    this.gm=[];
					this.table.style.display="none";
					this.tCar.innerHTML="亲，购物车里还没有商品，赶紧选择去吧......"
				}
				  // 2.渲染页面
				this.display();
			}
			display(){
				// console.log(this.gm);
				var str="";
				// 注意：给将来要添加事件的标签添加独立的标志
				// 注意：记得将每个商品的编号拼接上去，方便将来删除或修改时找到对应商品
				for(var i=0;i<this.gm.length;i++){
					str+=`<tr index="${this.gm[i].goodsId}">
					         <td>${i+1}</td>
						     <td><img src="${this.gm[i].msg.img.smallImg[0]}" alt=""></td>
						     <td>${this.gm[i].msg.name}</td>
						     <td>${this.gm[i].msg.price}</td>
						     <td><input type="number" min="1" value="${this.gm[i].num}" class="number"></td>
						     <td>${this.gm[i].msg.price*this.gm[i].num}元</td>
						     <td class="delete">删除</td>
					      </tr>`;
				}
				str+=`<tr>
					    <td rowspan="6" class="deleteall">全部删除</td>
					  </tr>`;
				this.tbody.innerHTML=str;
			}
			addEvent(){
				var that=this;
				  // 3.利用事件委托绑定删除事件
				this.tbody.onclick=function(eve){
					var e=eve || window.event;
					var tar=e.target || e.srcElement;
					if(tar.className=="delete"){
						 // 4.先获取当前点击删除按钮的商品的id
						that.id=tar.parentNode.getAttribute("index");
						// 5.删除DOM元素
						tar.parentNode.remove();
						 // 6.删除本地存储中的数据
						that.changeData(function(i){
							that.gm.splice(i,1);
						})
					}
					if(tar.className=="deleteall"){
						// 清空购物车
						localStorage.removeItem("goodsMsg");
						that.getData();
					}
					that.changeSumTotal();
				}	
				 // 7.通过事件委托绑定修改数量的事件：注意事件类型，的触发行为
				this.tbody.oninput=function(eve){
					var e=eve || window.event;
					var tar=e.target || e.srcElement;
					if(tar.className="number"){
						// 8.获取要修改数量的商品的id
						that.id=tar.parentNode.parentNode.getAttribute("index");
						 // 9.执行修改本地存储中数据的功能
						that.changeData(function(i){
							that.gm[i].num=tar.value;
						});
						// 10.每次修改数量，实时计算总价
						tar.parentNode.nextElementSibling.innerHTML=tar.value*tar.parentNode.previousElementSibling.innerHTML+"元";
					}
					that.changeSumTotal();
				}
				this.changeSumTotal();
			  
			}
			changeData(cb){
				// 根据点击的商品的id查找本地存储的数据中符合的商品数据
				for(var i=0;i<this.gm.length;i++){
					if(this.gm[i].goodsId==this.id){
						cb(i);
						break;
					}
				}
				
				// 剔除掉之后，得再存回去，否则仅仅是在内存中修改，没有修改本地存储
				localStorage.setItem("goodsMsg",JSON.stringify(this.gm));
			}
			// 改变总数量和总价格
			changeSumTotal(){
				var a=0;
				var b=0;
				for(var i=0;i<this.gm.length;i++){
					a+=parseInt(this.gm[i].num);
					b+=this.gm[i].num*this.gm[i].msg.price;
				}
				this.sum.innerHTML=a;
				this.totalprice.innerHTML=b;
			}
		}
		
		var c=new Car();
		c.getData();
		c.addEvent();
       
</script>